<template>
    <div class="page">
        <div class="antecedent">
            <div class="search">
                <div class="search-obj">
                    <div class="search-obj-name">业务编号:</div><el-input v-model="orderNo"
                        style="width: 400px;height: 30px;" placeholder="业务编号" clearable/>
                </div>
                <div class="search-obj">
                    <div class="search-obj-name">姓名:</div> <el-input v-model="name" style="width: 400px;height: 30px;"
                        placeholder="姓名" clearable/>
                </div>
                <div class="search-obj">
                    <div class="search-obj-name">身份证:</div><el-input v-model="certNo" style="width: 400px;height: 30px;"
                        placeholder="身份证" clearable/>
                </div>
                <div class="search-obj">
                    <div class="search-obj-name">手机号:</div> <el-input v-model="mobile"
                        style="width: 400px;height: 30px;" placeholder="手机号" clearable/>
                </div>
                <div class="search-obj search-pick">
                    <div class="search-obj-name">发生时间:</div> <el-date-picker v-model="time"
                        style="width: 80%; height: 30px;" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" clearable/>
                </div>
                <div class="search-obj">
                    <div class="search-obj-name">是否白户:</div> <el-select v-model="whitePerson" placeholder="是否白户"
                        style="width: 400px;height: 30px;" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>

            </div>
            <div class="submit">
                <el-button color="rgba(200, 16, 46, 100)" @click="search">查询</el-button>
                <el-button color="rgb(220,220,220)" @click="reSubmit">重置</el-button>
            </div>
            <div class="table">
                <el-table :data="data" style="width: 100%;" stripe :header-cell-style="tableHeaderStyle">
                    <el-table-column prop="orderNo" label="业务编号" min-width="180" align="center" />
                    <el-table-column prop="name" label="姓名" width="180" align="center" />
                    <el-table-column prop="certNo" label="身份证号" min-width="180" align="center" />
                    <el-table-column prop="mobile" label="手机号" min-width="180" align="center" />
                    <el-table-column prop="whitlePerson" label="是否白户" min-width="180" align="center" />
                    <el-table-column prop="happenTime" label="发生时间" min-width="180" align="center" />
                    <el-table-column prop="carModel" label="车型" min-width="180" align="center" />
                    <el-table-column prop="carType" label="车辆类型" min-width="180" align="center" />
                    <el-table-column prop="carPrice" label="车辆价格" min-width="180" align="center" />
                    <el-table-column prop="carSize" label="车身大小" min-width="180" align="center" />
                    <el-table-column label="操作" fixed="right" min-width="120" align="center">
                        <template v-slot="scope">
                            <el-button color="rgb(255,200,71)" @click="reportPage(scope.row.orderNo)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
                v-model:current-change="currentChange" @current-change="handleCurrentChange" />
        </div>
    </div>

</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let name = ref("")
let certNo = ref("")
let mobile = ref("")
let time = ref("")
let whitePerson = ref('')
let orderNo = ref("")
const options = ref([{ label: '是', value: 1 }, { label: '否', value: 0 }])
let currentChange = ref(1)
let total = ref(20)
let data = ref([])
let allData = ref([
    {
        "orderNo": "B001",
        "name": "李明辉",
        "certNo": "110105**********12",
        "mobile": "138****1234",
        "whitlePerson": "否",
        "happenTime": "2023-04-01",
        "carModel": "本田雅阁",
        "carType": "轿车",
        "carPrice": "18万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B002",
        "name": "张婉婷",
        "certNo": "340203**********34",
        "mobile": "159****5678",
        "whitlePerson": "是",
        "happenTime": "2023-04-02",
        "carModel": "丰田凯美瑞",
        "carType": "轿车",
        "carPrice": "20万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B003",
        "name": "王志强",
        "certNo": "430521**********56",
        "mobile": "136****9101",
        "whitlePerson": "否",
        "happenTime": "2023-04-03",
        "carModel": "宝马X1",
        "carType": "SUV",
        "carPrice": "35万元",
        "carSize": "紧凑型SUV"
    },
    {
        "orderNo": "B004",
        "name": "刘晓燕",
        "certNo": "510104**********78",
        "mobile": "189****2345",
        "whitlePerson": "是",
        "happenTime": "2023-04-04",
        "carModel": "奥迪A4L",
        "carType": "轿车",
        "carPrice": "30万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B005",
        "name": "陈思远",
        "certNo": "610103**********90",
        "mobile": "133****6789",
        "whitlePerson": "否",
        "happenTime": "2023-04-05",
        "carModel": "奔驰C级",
        "carType": "轿车",
        "carPrice": "40万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B006",
        "name": "杨乐乐",
        "certNo": "220202**********23",
        "mobile": "150****0987",
        "whitlePerson": "是",
        "happenTime": "2023-04-06",
        "carModel": "路虎发现神行",
        "carType": "SUV",
        "carPrice": "50万元",
        "carSize": "中型SUV"
    },
    {
        "orderNo": "B007",
        "name": "赵梓轩",
        "certNo": "450105**********45",
        "mobile": "186****4567",
        "whitlePerson": "否",
        "happenTime": "2023-04-07",
        "carModel": "特斯拉Model 3",
        "carType": "轿车（电动车）",
        "carPrice": "28万元",
        "carSize": "紧凑型车"
    },
    {
        "orderNo": "B008",
        "name": "黄雅静",
        "certNo": "360403**********67",
        "mobile": "135****8765",
        "whitlePerson": "是",
        "happenTime": "2023-04-08",
        "carModel": "比亚迪秦Pro",
        "carType": "轿车",
        "carPrice": "12万元",
        "carSize": "紧凑型车"
    },
    {
        "orderNo": "B009",
        "name": "周俊杰",
        "certNo": "150204**********89",
        "mobile": "157****3456",
        "whitlePerson": "否",
        "happenTime": "2023-04-09",
        "carModel": "大众帕萨特",
        "carType": "轿车",
        "carPrice": "25万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B010",
        "name": "吴梦琪",
        "certNo": "500112**********01",
        "mobile": "131****7890",
        "whitlePerson": "是",
        "happenTime": "2023-04-10",
        "carModel": "宝马X5",
        "carType": "SUV",
        "carPrice": "70万元",
        "carSize": "中大型SUV"
    },
    {
        "orderNo": "B011",
        "name": "徐浩然",
        "certNo": "320302**********24",
        "mobile": "180****1012",
        "whitlePerson": "否",
        "happenTime": "2023-04-11",
        "carModel": "奔驰E级",
        "carType": "轿车",
        "carPrice": "50万元",
        "carSize": "中大型车"
    },
    {
        "orderNo": "B012",
        "name": "孙嘉欣",
        "certNo": "654002**********46",
        "mobile": "155****5432",
        "whitlePerson": "是",
        "happenTime": "2023-04-12",
        "carModel": "奥迪Q5L",
        "carType": "SUV",
        "carPrice": "45万元",
        "carSize": "中型SUV"
    },
    {
        "orderNo": "B013",
        "name": "胡雨婷",
        "certNo": "469007**********68",
        "mobile": "137****9876",
        "whitlePerson": "否",
        "happenTime": "2023-04-13",
        "carModel": "雷克萨斯ES",
        "carType": "轿车",
        "carPrice": "38万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B014",
        "name": "朱志豪",
        "certNo": "130602**********91",
        "mobile": "188****3210",
        "whitlePerson": "是",
        "happenTime": "2023-04-14",
        "carModel": "沃尔沃XC60",
        "carType": "SUV",
        "carPrice": "40万元",
        "carSize": "中型SUV"
    },
    {
        "orderNo": "B015",
        "name": "高欣怡",
        "certNo": "542123**********13",
        "mobile": "132****6543",
        "whitlePerson": "否",
        "happenTime": "2023-04-15",
        "carModel": "吉利博越",
        "carType": "SUV",
        "carPrice": "15万元",
        "carSize": "紧凑型SUV"
    },
    {
        "orderNo": "B016",
        "name": "郭子轩",
        "certNo": "230103**********35",
        "mobile": "152****8760",
        "whitlePerson": "是",
        "happenTime": "2023-04-16",
        "carModel": "日产天籁",
        "carType": "轿车",
        "carPrice": "22万元",
        "carSize": "中型车"
    },
    {
        "orderNo": "B017",
        "name": "曹雨萱",
        "certNo": "710101**********57",
        "mobile": "176****4321",
        "whitlePerson": "否",
        "happenTime": "2023-04-17",
        "carModel": "马自达CX-5",
        "carType": "SUV",
        "carPrice": "25万元",
        "carSize": "紧凑型SUV"
    },
    {
        "orderNo": "B018",
        "name": "许浩然",
        "certNo": "411526**********79",
        "mobile": "134****7654",
        "whitlePerson": "是",
        "happenTime": "2023-04-18",
        "carModel": "福特锐界",
        "carType": "SUV",
        "carPrice": "30万元",
        "carSize": "中型SUV"
    },
    {
        "orderNo": "B019",
        "name": "韩雪梅",
        "certNo": "620502**********02",
        "mobile": "158****2468",
        "whitlePerson": "否",
        "happenTime": "2023-04-19",
        "carModel": "雪佛兰科迈罗",
        "carType": "跑车",
        "carPrice": "45万元",
        "carSize": "跑车"
    },
    {
        "orderNo": "B020",
        "name": "冯思琪",
        "certNo": "140923**********26",
        "mobile": "139****0123",
        "whitlePerson": "是",
        "happenTime": "2023-04-20",
        "carModel": "保时捷718",
        "carType": "跑车",
        "carPrice": "90万元",
        "carSize": "跑车"
    }
])

const tableHeaderStyle = ref({ background: '#f3f6fd', color: '#555' })

onMounted(() => {
    data.value = allData.value.slice(0, 10)
})
const reportPage = (param) => {
    router.push("/ReportVuePage?orderNo=" + param)
}
const handleCurrentChange = (page) => {
    let start = (page - 1) * 10
    let end = start + 10;
    data.value = allData.value.slice(start, end)
}
const search = () => {
    const tempData = allData.value.filter(data => {
        let eq = false
        if (name.value != "") {
            if (name.value === data.name) {
                eq = true
            } else {
                return false
            }
        }
        if (certNo.value != "") {
            if (certNo.value === data.certNo) {
                eq = true
            } else {
                return false
            }
        }
        if (mobile.value != "") {
            if (mobile.value === data.mobile) {
                eq = true
            } else {
                return false
            }
        }
        if (time.value != "") {
            if (time.value === data.time) {
                eq = true
            } else {
                return false
            }
        }
        if (whitePerson.value != "") {
            if (whitePerson.value === data.whitePerson) {
                eq = true
            } else {
                return false
            }
        }
        if (orderNo.value != "") {
            if (orderNo.value === data.orderNo) {
                eq = true
            } else {
                return false
            }
        }
        if (name.value === "" &&
            certNo.value === "" &&
            mobile.value === "" &&
            time.value === "" &&
            whitePerson.value === "" &&
            orderNo.value === "") {
            return true;
        } else {
            return eq
        }

    })
    let start = (currentChange.value - 1) * 10
    let end = start + 10;
    if (tempData.length < end) {
        data.value = tempData
    } else {
        data.value = tempData.slice(start, end)
    }
    total.value = tempData.length
}
const reSubmit = () => {
    name.value = ""
    certNo.value = ""
    mobile.value = ""
    time.value = ""
    whitePerson.value = ""
    orderNo.value = ""
}
</script>
<style scoped lang="scss">
.page {
    height: 100%;
    background-color: rgba(250, 250, 250, 100)
}

.antecedent {
    width: 100%;
}

.search {
    margin-left: 80px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;


    .search-obj {
        width: 480px;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .search-obj-name {
             text-align: end;
            width: 100px;
            margin-right: 10px;
        }

    }
}

.submit {
    position: absolute;
    right: 100px;
    margin-top: 40px;
}

.table {
    margin-top: 100px;
}

.el-pagination {
    position: absolute;
    right: 80px;
    margin-top: 20px;
}
</style>